<template>
    <div class="send">
       <div class="case_input" v-show="!isShowarea">
        <input type="text" class="input" placeholder="写评论" @focus="showTextAreaHandle">
        <span class="icon_group">
            <i class="iconfont iconpinglun-"></i>
            <span class="icon_group_num">102</span>
        </span>
        <i class="iconfont iconshoucang"></i>
        <i class="iconfont iconfenxiang"></i>
       </div>
<div class="case_textarea" v-show="isShowarea">
    <textarea class="textarea" placeholder="回复" ref="textarea_dom" @blur="hideTextAreaHandle" v-model="content"></textarea>
    <span class="send_btn" @click="sendCommentHandle">发送</span>
</div>
    </div>
</template>

<script>
import { addPostComment } from "@/api";
import Bus from '@/untails/bus'
export default {
    props:['detailId'],
  data () {
      return {
          isShowarea:false,
          content:'',
          parent_id:''
      }
  },
  mounted(){
      // 事件绑定三要素：
    //  1. 事件源         Bus
    //  2. 事件类型       sendComment
    //  3. 事件处理函数   ()=>{}
      Bus.$on('sendComment',(id)=>{
          console.log('触发事件总线上得事件',id);
          this.parent_id=id
        //   this.isShowarea=true
        this.showTextAreaHandle()
      })
  },
  methods:{
      showTextAreaHandle(){
          this.isShowarea=true
          console.log(this.$refs.textarea_dom);
        //   setTimeout(()=>{
        //       this.$refs.textarea_dom.focus()
        //   },50)
        this.$nextTick(()=>{
            this.$refs.textarea_dom.focus()
        })
      },
      hideTextAreaHandle(){
        setTimeout(() => {
        this.isShowarea = false;
        this.parent_id=''
      }, 50);
      },
      sendCommentHandle(){
          console.log('发送评论');
          addPostComment({
               id:this.detailId,
          content:this.content,
          parent_id:this.parent_id
          }).then((res)=>{
              console.log(res);
              this.$toast.success(res.data.message)
              this.content='',
              this.$emit('updataComment')
          })
      }
  }
}
</script>
<style lang="less" scoped>
.send {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
.case_input {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  .input {
        text-indent: 1em;
        width: 180px;
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        background-color: #d7d7d7;
        border-radius: 15px;
        border: none;
    }
    .iconfont{
        font-size: 25px;
    }
  .icon_group {
       position: relative;
    .icon_group_num {
        position: absolute;
        top: -10px;
        right: -5px;
        background-color: red;
        color:#fff;
        padding: 3px;
        font-size: 12px;
        border-radius: 100px;
      }
    }

  }
  .case_textarea {
      
      padding: 10px;
    display: flex;
    align-items: flex-end;
  .textarea {
      text-indent: 1em;
     flex: 1;
     height: 80px;
     border-radius: 5px;
      background-color: #d7d7d7;
      padding: 10px;
      border: none;
  }

  .send_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      color: #fff;
      height: 26px;
      width:60px;
      border-radius: 13px;
      margin-left: 10px;
      font-size: 13px;
  }
}
}
</style>